import { useState } from "react";
import Instance from "./Instance";
import PlusIcon from "@/assets/icons/plus.svg?jsx";
import NewInstanceModal from "./NewInstanceModal";

export default function Application() {
  const [newInstanceModalVisible, setNewInstanceModalVisible] = useState(false);
  return (
    <>
      <div className="grid grid-cols-[repeat(auto-fill,250px)] justify-center gap-5 p-4">
        <Instance />
        <button
          className="rounded-lg border text-center transition-colors duration-300 hover:bg-zinc-100"
          onClick={() => setNewInstanceModalVisible(true)}
        >
          <PlusIcon className="inline size-12" />
        </button>
      </div>
      <NewInstanceModal
        visible={newInstanceModalVisible}
        onVisibleChange={setNewInstanceModalVisible}
      />
    </>
  );
}
